<template>
	<div class="detail-wrap" v-if="detail" v-wechat-title="$route.meta.title = seoTitle">
        <header class="header-body" v-show="headerScroll">
            <a class="back" href="javascript:;" @click="goback"></a>
            <div class="title">
                <span class="tit ellips">{{ detail.title }}</span>
                <span class="desc">
                    <span v-if="detail.property === 0">
                        <template v-if="detail.rent != 0">出租:{{ detail.rent }}元/㎡</template>
                        <template v-if="detail.rent == 0">面议</template>
                    </span>
                    <span v-else>
                        <template v-if="detail.price != 0">出售:{{ detail.price }}元/㎡</template>
                        <template v-if="detail.price == 0">面议</template>
                    </span>
                    <span>{{ detail.area }}㎡</span>
                </span>
            </div>
        </header>
        <section class="banner-body" id="banner-body">
            <a class="back" href="javascript:void(0);" @click="goback"></a>
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-if="detail.slider.video">
                    <video-player  class="video-player-box"
                                   ref="videoPlayer"
                                   :options="playerOptions"
                                   :playsinline="true"
                                   customEventName="detail-video">
                    </video-player>
                </swiper-slide>
                <swiper-slide v-for="(slider,key) in detail.slider.image" :key="key">
                    <img :src="slider">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </section>
        <section class="house-base-info">
            <h1 class="title">{{ detail.title }}</h1>
            <div class="major-house-info">
                <div class="items" v-if="detail.property == 0">
                    <span class="lab">租金</span>
                    <span class="price" v-if="detail.rent != 0"><em>{{ detail.rent }}元/㎡</em></span>
                    <span class="price" v-if="detail.rent == 0"><em>面议</em></span>
                </div>
                <div class="items" v-else>
                    <span class="lab">售价</span>
                    <span class="price" v-if="detail.price != 0"><em>{{ detail.price }}元/㎡</em></span>
                    <span class="price" v-if="detail.price == 0"><em>面议</em></span>
                </div>
                <div class="items">
                    <span class="lab">占地面积</span>
                    <span class="txt" v-if='detail.area'>{{ detail.area }}㎡</span>
                </div>
                <div class="items">
                    <span class="lab">交易类型</span>
                    <span class="txt" v-if="detail.property == 0">出租</span>
                    <span class="txt" v-if="detail.property == 1">出售</span>
                </div>
            </div>
            <div class="other-house-info">
                <div class="tag-box"  v-if="detail.tag[0] != ''">
                  <span class="tag" v-for="(tag,key) in detail.tag" :key="key">{{ tag }}</span>
                </div>
                <div class="items">
                  <span class="lab">信息编号：</span>{{ detail.code }}</div>
                <div class="items" v-if="detail.property == 0">
                  <span class="lab" >土地性质：</span>出租
                </div>
                <div class="items" v-if="detail.property == 1">
                  <span class="lab" >土地性质：</span>出售
                </div>
                <div class="items">
                    <span class="lab">交付标准：</span>
                    <span class="txt ellips">
                        <span v-for="standard in detail.standard">{{ standard }}</span>
                    </span>
                </div>
                <div class="items">
                  <span class="lab">剩余土地年限：</span>{{ detail.rest_term }}年</div>
                <div class="items">
                  <span class="lab">规划用途：</span>{{ detail.land_use.name }}</div>
                <div class="items" v-if="detail.property_cert == 0">
                  <span class="lab">产权证：</span>无
                </div>
                 <div class="items" v-if="detail.property_cert == 1">
                  <span class="lab">产权证：</span>有
                </div>
            </div>
        </section>
        
        <section class="house-price-trend" style="margin-top: 12px;">
            <div class="title" style="margin-bottom: 15px;"><span>土地描述</span></div>
            <div class="content" :class="{desClose:close,desOpen:!close}" style="padding: 0 15px;">
                <div v-html="detail.descs"></div>
            </div>
            <div class="open" @click="openBtn">{{ opentxt }}<span class="desIocn" :class="{openIcon:open,closeIcon:!open}"></span></div>
        </section>

        <section class="map-periphery" style="display:none;">
            <div class="title" style="padding: 20px 15px" >
                <span class="txt">周边配套</span>
            </div>
            <a class="address" href="javascript:;">
                <span class="lab">地址：</span>
                <span class="txt ellips">{{detail.address}}</span>
                <i class="icon"></i>
            </a>
             <div class="map-box">
                <baidu :longitude="detail.longitude" :latitude="detail.latitude" ></baidu>
             </div>
        </section>

        <div class="index-panel" v-if="remList.length != 0">
            <div class="hd"><i></i><span>为你推荐土地</span></div>
            <div class="index-remlist">
                <router-link :to="{name:'landDetail',params:{id:item.id}}" class="items" v-for="(item, index) in remList" :key="index">
                    <div class="pic-box" style="position:relative;">
                        <img :src="item.logo">
                        <span class="land-tag" v-if="item.owner_release == 0">业主</span>
                    </div>
                    <div class="info-box">
                        <p class="tit">{{ item.title }}</p>
                        <p class="info ellips">
                            <span v-if="item.land_use">{{ item.land_use.name }}/</span>
                            <span v-if="item.area">{{ item.area }}㎡</span>
                            <span v-if="item.park">/{{ item.park.city }}{{ item.park.city_first }}{{ item.park.city_second }}</span></p>
                        </p>
                        <p class="area ellips" v-if="item.property == 0 ">
			                <span v-if="item.rent == 0">
			                	<em class="price">面议</em>
			                </span>
                            <span v-if="item.rent !=0">
			                	<em class="price">{{ item.rent }}</em>
		                    	<small class="unit">元/㎡</small>
			                </span>
                        </p>
                        <p class="area ellips" v-if="item.type == 1 ">
                            <span v-if="item.price == 0">
                                <em class="price">面议</em>
                            </span>
                            <span v-if="item.price !=0">
                                <em class="price">售价：{{ item.price }}</em>
                                <small class="unit">元/㎡</small>
                            </span>
                        </p>
                        <div class="tag-box" v-if="item.tag[0] != ''">
                            <span class="tag" v-for="(tag,index) in item.tag"  v-if="index < 3">{{ tag }}</span>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>

        <message :atvar='atvar' :name='name' :mobile="mobile" :model="model" :modelId="modelId" :url="url" :isUse="isUse"  :isSet="isSet" :isUrl="isUrl"></message>
		<footer-view></footer-view>
	</div>
</template>

<script>
    import 'video.js/dist/video-js.css';
    import {videoPlayer} from 'vue-video-player';
    import {swiper, swiperSlide} from 'vue-awesome-swiper';
    import 'swiper/dist/css/swiper.css';
    import baidu from './baidu';
    import message from '../components/public/message'

    export default {
        name: 'detail',
        data() {
            return {
                detail: '',
                isUse:true,
                playerOptions: {
                    muted: false,
                    language: 'zh',
                    sources: [{
                        type: "video/mp4",
                        src: ""
                    }],
                    poster: "http://api.qalex.com/storage/images/20181024231423_173.jpg",
                    width: document.body.clientWidth,
                    height: 280
                },
                swiperOption: {
                    // height: 380,
                    speed: 500,//切换速度
                    watchOverflow: true, //当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航等。默认不开启这个功能。
                    loop: false,//开启循环模式
                    slidesPerView: 1,
                    spaceBetween: 10,
                    ationType: 'progress',
                    preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件。
                    simulateTouch: false,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction',
                    },
                    on: {
                        touchEnd: function (event) {
                            //你的事件
                        },
                    }
                },
                headerScroll: false,
                opentxt: '展开信息',
                close: true,
                open: true,
                remList: [],
                atvar:'',
                name:'',
                mobile:'',
                model:'',
                modelId:'',
                isSet:'',
                isUrl:'',
                url:this.$route.path.slice(this.$route.path.indexOf('/'))
                
            };
        },
        computed: {
            selectedId(){
                 return this.$store.state.city.city_id
            },
            seoTitle() {
                let tt = '';
                tt += this.detail.title;
                if (this.detail.property === 0) {
                    tt += ' - 土地出租';
                } else {
                    tt += ' - 土地出售';
                }
                tt += ' - 阿力士';
                return tt
            }
        },
        components: {
            swiper,
            swiperSlide,
            baidu,
            videoPlayer,
            message
        },
        created() {
            window.onscroll = () => {
                var h = document.documentElement.scrollTop || document.body.scrollTop;
                this.headerScroll = h > 250;
            }
        },
        mounted() {
            this.detailGet();
            this.getRemList();
        },
        methods: {
            detailGet() {
                this.$get('/api/land/' + this.$route.params.id,{token:localStorage.getItem('token')}).then(res => {
                    if (res.code == 0) {
                        console.log(res.data);
                        this.detail = res.data;
                        this.atvar = this.detail.broker.atvar;
                        this.name = this.detail.broker.name;
                        this.mobile = this.detail.broker.true_mobile;
                        this.modelId = this.detail.id
                        this.isSet = this.detail.im_set.is_use;
                        this.isUrl = this.detail.im_set.url;
                        if(this.detail.property == 0){
                            this.model = 'land_rent'
                        }else{
                            this.model = 'land_buy'
                        }
                        if (res.data.slider.video) {
                            this.playerOptions.sources[0].src = res.data.slider.video[0];
                            this.playerOptions.poster = res.data.logo;
                        }
                    }
                });
            },
            getRemList() {
                this.$get('/api/land', {
                    city_id: this.selectedId,
                    is_recommend: 1
                }).then(res => {
                    console.log(res.data);
                    if (res.code == 0) {
                        this.remList = res.data
                    }
                })
            },
            goback() {
                if (window.history.length <= 1) {
                    this.$router.push('/');
                } else {
                    this.$router.go(-1);
                }
            },
            openBtn() {
                this.close = !this.close;
                this.open = !this.open;
                this.opentxt = this.open ? '展示信息' : '收起信息';
            }
        },
        watch: {
            '$route'(to, from) {
                this.detail = '';
                this.detailGet();
                this.getRemList();
            }
        }
    };
</script>

<style scoped>
    @import '../assets/css/sale-details.css';

    .detail-wrap {
        padding-bottom: 64px;
        background-color: #f0f0f0;
    }

    .map-box {
        display: block;
        width: 100%;
        height: 400px;
    }

    .real-house {
        margin-bottom: 15px;
        background-color: #f3f3f3
    }

    .real-house .pic {
        width: 40%;
        margin: 0 auto
    }

    #map {
        display: block;
        width: 100%;
        height: 300px;
    }

    .open {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        color: #333;
        margin-top: 10px;
        background-color: #fff;
        border-top: 1px solid #f0f0f0;
    }

    .open span {
        display: inline-block;
        margin-left: 6px;
    }

    .open span.openIcon {
        border-top: 8px solid #999;
        border-bottom: 0px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }

    .open span.closeIcon {
        border-top: 0px solid #999;
        border-bottom: 8px solid #999;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
    }

    .desClose {
        height: 100px;
        overflow: hidden;
    }

    .desOpen {
        height: auto;
    }

    .index-panel {background-color: #fff;padding: 0 15px;margin: 12px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;}
    .index-panel .hd {padding: 15px 0;border-bottom: 1px solid #f0f0f0;font-size: 0;}
    .index-panel .hd span {display: inline-block;line-height: 1;border-left: 3px solid #ce1927;padding-left: 10px;font-size: 16px;}
    .index-panel .hd i {float: right;width: 20px;height: 20px;position: relative;margin-top: -2px;}
    .index-panel .hd i:before {position: absolute;top: 4px;right: auto;bottom: auto;left: 1px;z-index: 10;display: block;content: "";width: 10px;height: 10px;border-width: 2px 2px 0 0;border-style: solid;border-color: #ccc;transform: rotate(45deg);}

    .index-remlist .items {display: flex;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;}
    .index-remlist .pic-box {position: relative;
        width: 120px;
        margin-right: 15px;
        overflow: hidden;}
    .index-remlist .pic-box img {display: block;width: 100%;height: auto;border-radius: 2px;}
    .index-remlist .pic-box i {position: absolute;left: 0;top: 0;width: 50px;}
    .index-remlist .pic-box i img {border-radius: 0;}
    .index-remlist .info-box {-webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100px;
        overflow: hidden;}
    .index-remlist .info-box .tit {
        margin-bottom: 6px;
        font-size: 16px;
        color: #333;
        line-height: 1.5;
        font-weight: 500;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .index-remlist .info-box .info {
        margin-bottom: 5px;
        font-size: 12px;
        color: #666;
        line-height: 1.5;
    }
    .index-remlist .info-box .area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        margin-bottom: 3px;
        font-size: 12px;
        color: #aaa;
        line-height: 1.2;
    }
    .index-remlist .info-box .price {
        font-size: 1.3em;
        font-weight: 700;
        color: #e62129;
    }

    .index-remlist .info-box .tag-box {
        font-size: 0;
    }
    .index-remlist .info-box .tag {
        display: inline-block;
        margin-right: 5px;
        margin-top: 5px;
        padding: 3px 5px;
        font-size: 12px;
        color: #999;
        line-height: 1.2;
        border: 1px solid #f0f0f0;
        border-radius: 2px;
    }
    .land-tag{
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        border-top-left-radius: 3px;
        border-bottom-right-radius: 3px;
        background-color: #e62129;
    }
    .index-remlist .info-box .tag:first-child{color:#e6b322;background-color: rgba(230, 179, 34, 0.2);}
    .index-remlist .info-box .tag:nth-child(2){color:#68be8d;background-color: rgba(104, 190, 141, 0.2);}
    .index-remlist .info-box .tag:nth-child(3){color:#59b9c7;background-color: rgba(89, 185, 199, 0.2);}
    .index-remlist .info-box .tag:nth-child(4){color:#e62129;background-color: rgba(230, 33, 41, 0.2);}
</style>
